<template>
    <div>
        <div class="expert-content">
            <div class="top-img">
                <img class="hd-img-responsive" src="../../../assets/images/wenzhen.png"/>
                <div class="leave-msg-item" @click="mymsg(item)" >
                    <van-row class="leave-msg">
                        <van-col span="24">查看我的留言</van-col>
                    </van-row>
                </div>
            </div>
            <van-tabs v-model="active" sticky>
                <van-tab title="都市绿洲心理咨询">
                    <van-row v-for="(item,index) in list" :key="index">
                        <van-col span="24" class="van-row">
                            <div class="details-list">
                                <van-row>
                                    <van-col span="8">
                                        <div class="lower-img">
                                            <img :src="item.headimgurl"/>
                                        </div>
                                    </van-col>
                                    <van-col style="padding-left: 5px" span="16">
                                        <!--<div class="lower-title">心理咨询室（{{index+1}}）</div>&ndash;&gt;-->
                                        <div class="lower-title">心理咨询室（{{index+1}}）</div>
                                        <div class="schooling hd-ellipsis-2">
                                            {{item.experts_work_experience}}
                                        </div>
                                        <div class="schooling hd-ellipsis">
                                            开办单位:沈阳市都市绿洲心理咨询
                                        </div>
                                        <div class="schooling hd-ellipsis-2">
                                            咨询时间:{{item.experts_education}}
                                        </div>
                                        <div class="zxc-btn">
                                            <van-col span="12">
                                                <div class="item2" @click="leavemsg(item)">
                                                    <span>在 线 留 言</span>
                                                </div>
                                            </van-col>
                                            <van-col span="12">
                                                <div class="item2" @click="shipin(item.url)">
                                                    <span>视 频 接 入</span>
                                                </div>
                                            </van-col>
                                        </div>
                                    </van-col>
                                </van-row>
                                <div class="van-hairline--top-bottom"></div>
                            </div>
                        </van-col>
                    </van-row>
                </van-tab>
                <van-tab title="省心理咨询协会">
                    <van-row v-for="(item,index) in list2" :key="index">
                        <van-col span="24" class="van-row">
                            <div class="details-list">
                                <van-row>
                                    <van-col span="8">
                                        <div class="lower-img">
                                            <img :src="item.headimgurl"/>
                                        </div>
                                    </van-col>
                                    <van-col style="padding-left: 5px" span="16">
                                        <!--<div class="lower-title">心理咨询室（{{index+1}}）</div>&ndash;&gt;-->
                                        <div class="lower-title">心理咨询室（{{index+1}}）</div>
                                        <div class="schooling hd-ellipsis-2">
                                            {{item.experts_work_experience}}
                                        </div>
                                        <div class="schooling hd-ellipsis">
                                            开办单位:省心理咨询行业协会
                                        </div>
                                        <div class="schooling hd-ellipsis-2">
                                            咨询时间:{{item.experts_education}}
                                        </div>
                                        <div class="zxc-btn">
                                            <van-col span="12">
                                                <div class="item2" @click="leavemsg(item)">
                                                    <span>在 线 留 言</span>
                                                </div>
                                            </van-col>
                                            <van-col span="12">
                                                <div class="item2" @click="shipin(item.url)">
                                                    <span>视 频 接 入</span>
                                                </div>
                                            </van-col>
                                        </div>
                                    </van-col>
                                </van-row>
                                <div class="van-hairline--top-bottom"></div>
                            </div>
                        </van-col>
                    </van-row>
                </van-tab>
                <van-tab title="辽宁心悦心理专家">
                    <van-row v-for="(item,index) in list3" :key="index">
                        <van-col span="24" class="van-row">
                            <div class="details-list">
                                <van-row>
                                    <van-col span="8">
                                        <div class="lower-img">
                                            <img :src="item.headimgurl"/>
                                        </div>
                                    </van-col>
                                    <van-col style="padding-left: 5px" span="16">
                                        <!--<div class="lower-title">心理咨询室（{{index+1}}）</div>&ndash;&gt;-->
                                        <div class="lower-title">心理咨询室（{{index+1}}）</div>
                                        <div class="schooling hd-ellipsis-2">
                                            {{item.experts_work_experience}}
                                        </div>
                                        <div class="schooling hd-ellipsis">
                                            开办单位:辽宁心悦心理专家
                                        </div>
                                        <div class="schooling hd-ellipsis-2">
                                            咨询时间:{{item.experts_education}}
                                        </div>
                                        <div class="zxc-btn">
                                            <van-col span="12">
                                                <div class="item2" @click="leavemsg(item)">
                                                    <span>在 线 留 言</span>
                                                </div>
                                            </van-col>
                                            <van-col span="12">
                                                <div class="item2" @click="shipin(item.url)">
                                                    <span>视 频 接 入</span>
                                                </div>
                                            </van-col>
                                        </div>
                                    </van-col>
                                </van-row>
                                <div class="van-hairline--top-bottom"></div>
                            </div>
                        </van-col>
                    </van-row>
                </van-tab>
            </van-tabs>
            <!--            <van-row>-->
            <!--                <van-col span="24" class="van-row">-->
            <!--                <div v-for="(item, index) in list" :key="index">-->
            <!--                    <div class="details-list">-->
            <!--                        <van-row>-->
            <!--                            <van-col span="8">-->
            <!--                                <div class="lower-img">-->
            <!--                                    <img :src="item.experts_img"/>-->
            <!--                                </div>-->
            <!--                            </van-col>-->
            <!--                            <van-col style="margin-left: 5px" span="15">-->
            <!--                                <div class="lower-title">{{item.experts_name}}</div>-->
            <!--                                <div class="hd-ellipsis-2">-->
            <!--                                                        <span class="professional" v-for="(item1,index) in list.experts_education" :key="index">-->
            <!--                                                            <van-tag type="primary">{{item1}}</van-tag>-->
            <!--                                                        </span>-->
            <!--                                </div>-->
            <!--                                <div class="schooling hd-ellipsis-2">-->
            <!--                                    擅长：{{item.experts_work_experience}}-->
            <!--                                </div>-->
            <!--                                <div class="zxc">-->
            <!--                                    <div class="item2">-->
            <!--                                        <span @click="leavemsg(item)">在线留言</span>-->
            <!--                                    </div>-->
            <!--                                    <div class="item2">-->
            <!--                                        <span>视频接入</span>-->
            <!--                                    </div>-->
            <!--                                </div>-->
            <!--                            </van-col>-->
            <!--                        </van-row>-->
            <!--                        <div class="van-hairline&#45;&#45;top-bottom"></div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--                </van-col>-->
            <!--            </van-row>-->
        </div>
        <!--        <van-tabs v-model="active">-->
        <!--            <van-tab title="心理心理咨询室">-->
        <!--                -->
        <!--            </van-tab>-->
        <!--            <van-tab title="口腔心理咨询室">-->
        <!--            </van-tab>-->
        <!--        </van-tabs>-->
    </div>
</template>

<script>
import { epidemicserviceList } from '@/api/mine'

export default {
  data () {
    return {
      active: 0,
      dataList: [
        {
          time: '8:00-20:00',
          title: '擅长解决情绪障碍以及婚恋情感，亲子等人际关系问题',
          number: '心里咨询师（孙睿熙）',
          url: 'https://mp.weixin.qq.com/s/tUvb11zYVFuUyHdgMymgKA'
        },
        {
          time: '18:00-21:00',
          title: '擅长心理减压，抑郁。焦虑、强迫的心理调适，婚姻、家庭、亲子问题咨询。',
          number: '心里咨询师（罗宇洋）',
          url: 'https://mp.weixin.qq.com/s/fv0LWSFtsHTGHiq54xtbNw'
        },
        {
          time: '10：00-16：00；18：00-20：00',
          title: '擅长个人成长及情绪、情感问题；亲密关系和人际关系问题。',
          number: '心里咨询师（李莹）',
          url: 'https://mp.weixin.qq.com/s/onE75sHmuKhmWew5X8YWvg'
        },
        {
          time: '12：00-22：00',
          title: '擅长家庭治疗，亲子关系调整，婚恋情感方面咨询。',
          number: '心里咨询师（刘冬梅）',
          url: 'https://mp.weixin.qq.com/s/rqTiv5b8aBNMrCpsBhdjwg'
        },
        {
          time: '18:00-21:00',
          title: '擅长焦虑谱系相关障碍，躯体化形式障碍、健康焦虑等问题。',
          number: '心里咨询师（董首兰）',
          url: 'https://mp.weixin.qq.com/s/9XuT4YHgelLsGo2A6Bn6Cg'
        },
        {
          time: '10:00-18:00',
          title: '擅长抑郁，焦虑情绪调整，亲密关系和人际关系问题，临终关怀陪伴。',
          number: '心里咨询师（祝丹）',
          url: 'https://mp.weixin.qq.com/s/E299HWcEPJqru5V4hkuA0Q'
        },
        {
          time: '8:00-11:00，18:00-21:00',
          title: '擅长解决儿童，青少年成长中的问题，亲子、夫妻关系中的情绪、情感问题.',
          number: '心里咨询师（裴蓓）',
          url: 'https://mp.weixin.qq.com/s/_FE_NIBtdDebShvY8cC9cw'
        },
        {
          time: '8：30-19：30',
          title: '擅长解决焦虑情绪障碍、亲子关系、人际关系、人格完善和成长。',
          number: '心里咨询师（郎勇）',
          url: 'https://mp.weixin.qq.com/s/C0_ofcU5GfWndu3-B138hA'
        },
        {
          time: '9：00-16：00；19：00-22：00',
          title: '擅长亲子教育、婚姻家庭、健康管理及咨询。',
          number: '心里咨询师（潘慧凝）',
          url: 'https://mp.weixin.qq.com/s/Mj50qgunA4-r1Ghe0uNEfQ'
        },
        {
          time: '9:00～12:00；14:00～17:00',
          title: '擅长解决儿童、青少年成长中的问题，婚姻家庭中的情绪情感问题及亲子关系问题',
          number: '心里咨询师（白玉银）',
          url: 'https://mp.weixin.qq.com/s/YMR1W4D_itgj1KSQlZUp4A'
        },
        {
          time: '18：30-22：00',
          title: '擅长解决情绪障碍及亲子关系问题',
          number: '心里咨询师（侯晔）',
          url: 'https://mp.weixin.qq.com/s/l4fZyYvo5LSABO-IJhRPnA'
        },
        {
          time: '18:00-20:00',
          title: '擅长婚姻家庭中的情绪情感问题及亲子关系问题',
          number: '心里咨询师（齐立春）',
          url: 'https://mp.weixin.qq.com/s/AjGWAbsbAFL521-pqLLPYg'
        },
        {
          time: '8:00-21:00',
          title: '擅长青少年成长问题、人际关系问题咨询',
          number: '心里咨询师（孙波）',
          url: 'https://mp.weixin.qq.com/s/CTHm9d6h9mn9OeXEsud7bg'
        }
      ],
      list: [],
      list1: [],
      list2: [],
      list3: [],
      value: '',
      show: false,
      overlayshow: false
    }
  },
  methods: {
    shipin (data) {
      window.location.href = data
    },
    init () {
      epidemicserviceList({ type: '1' }).then(ret => {
        this.list = ret.data.data
        // this.list.forEach(item => {
        //   let x = item.experts_education
        //   this.list.experts_education = x.split(';')
        // })
      })
      epidemicserviceList({ type: '2' }).then(ret => {
        this.list2 = ret.data.data
      })
      epidemicserviceList({ type: '3' }).then(ret => {
        this.list3 = ret.data.data
      })
    },
    mymsg (item) {
      console.log(item, '输出的参数')
      this.$router.push({
        name: 'remote-inquiry-user-msg'
      })
    },
    leavemsg (value) {
      console.log(value)
      this.$router.push({
        name: 'remote-inquiry-leave-msg',
        params: {
          id: value.id,
          name: value.experts_name,
          tel: value.experts_telephone_number
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .van-icon{
        position: relative;
        top: 0.3rem;
        left: 0.35rem;
        color: white;
        font: 0.875rem/1 "vant-icon";
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
    .circle-border{
        /*margin-right: 5px;*/
        height: 1.6rem;
        width: 1.7rem;
        border-radius: 2em;
        background-color: #1989fa;
    }
    .details-list{
        position: relative;
    }
    .details-list .van-row{
        padding: 10px;
        /*margin-top: 5px;*/
        /*margin-left: 10px;*/
    }
    .in-title {
        margin-top: 1rem;
        margin-left: 1.25rem;
        height: 30px;
        border-left: 3px solid #E51C23;
    }

    .font-title {
        margin-left: 2.5rem;
        /*margin-top: -1.56rem;*/
    }
    .lower-img {
        /*margin-left: 10%;*/
        /*margin-top: 24%;*/
        height: 8.5rem;
    }

    .lower-img img {
        width: 100%;
        height: 90%;
    }

    .lower-title {
        /*margin-top: 15%;*/
        font-size: 14px;
        font-weight: 600;
        font-family: monospace;
    }

    .lower-tag span {
        font-size: 14px;
        padding-left: 10px;
        color: white;
    }

    .lower-tag2 span {
        font-size: 14px;
        padding-left: 10px;
        color: white;
    }

    .lower-dir {
        margin-top: -5%;
        margin-right: 6%;
        font-size: 14px;
        color: #B7B8B7;
    }

    .msg span {
        font-size: 12px;
    }
    .group > .item {
        color: #75ACDC;
        padding: 3px;
        font-size: 12px;
        border: 1px solid #75ACDC;
        text-align: center;
        margin-left: 10px;
    }
    .item{
        width: 25%;
        padding: 3px;
        text-align: center;
        margin-right: 90px;
    }
    .item2 {
        /*width: 6rem;*/
        padding: 4px 5px;
        font-size: 12px;
        color: #1989fa;
        border: 1px solid #1989fa;
        /*float: right;*/
        margin-left: 10px;
        text-align: center;
        border-radius: 5px;
    }
    .item1{
        margin-right: 30px;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 2em;
        text-align: center;
        line-height: 25px;
    }
    .background{
        height: 100%;
        background-color: #F5F5F5;
    }
    .qrdiv{
        width: 100%;
        padding: 0 0 12px 0;
        text-align: center;
        background: #FFFFFF;
        color: #000;
        float: left;
    }
    .bod{
        border: 1px solid #f5f5f5;
        padding: 6px 0px 4px 7px;
        border-right: 5px;
        background: #d0d0d0;
        border-radius: 5px;
    }
    .hd-ellipsis-2 {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal!important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 3px;
    }
    .professional{
        font-size: 12px;
        color: #8e8e8e;
    }
    .schooling{
        font-size: 12px;
        color: #8e8e8e
    }
    .zxc{
        margin-top: 5px;
        float: right;
        text-align: right;
        width: 100%;
        /*position: absolute;*/
        bottom: 10px;
        right: 10px;
    }
    .van-tag{
        margin-right: 10px;
    }
    .leave-msg{
        width: 100%;
        text-align: right;
        font-size: 12px;
        border-bottom: 1px solid #dddddd;
    }
    .zxc-btn{
        display: flex;
        justify-content: space-between;
        /*width: 100%;*/
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    .top-img{
        position: relative;
    }
    .leave-msg-item{
        position: absolute;
        bottom: 0;
        right: 10px;
        padding: 10px 0;
    }
    .expert-content >>> .van-tab{
        font-size: 12px;
    }
</style>
